<template>
	<view>

		<view class="categoryList">
			<scroll-view class="scroll-left" scroll-y="true" scroll-left="120" :style="'height:'+clentHeiht+'px'">
				<view id="category-item" v-for="(item,index) in categoryLIst" @tap="topToggle(index)"
					:class="{activeStyle:toggle==index}">
					{{item.name}}
				</view>
			</scroll-view>

			<scroll-view class="scroll-rigth" scroll-y="true" scroll-left="120" :style="'height:'+clentHeiht+'px'">
				<view class="topImage" v-show="rightTopImage!=''">
					<image :src="rightTopImage" mode="aspectFill" lazy-load="true"></image>
				</view>
				<view class="topImage" v-show="rightTopImage==''">
					<image src="https://shyvv-1308916267.cos.ap-chengdu.myqcloud.com/mall/58881654671202045.png"
						mode="aspectFill" lazy-load="true"></image>
				</view>

				<view class="bottomItime">
					<uni-grid :column="3" :highlight="true" :showBorder="false">
						<uni-grid-item v-for="(item, index) in rightList" :index="index" :key="index"
						>
							<view @tap="gotoCategoryList(item.id,item.name)">
								<view class="grid-item-box" style="background-color: #fff;" v-if="item.icon!=''">
									<image :src="item.icon" mode="aspectFit" :lazy-load="true"></image>
								</view>
								
								<view class="grid-item-box" style="background-color: #fff;" v-if="item.icon==''">
									<image
										src="https://shyvv-1308916267.cos.ap-chengdu.myqcloud.com/mall/58881654671202045.png"
										mode="aspectFill" :lazy-load="true"></image>
								</view>
								<text class="text">{{item.name}}</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				clentHeiht: 0,
				categoryLIst: [],
				toggle: 0,
				rightList: [],
				rightTopImage: ''
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList() {
				this.$api.category.getCategoryTree().then(res => {
					if (res.code == 200) {
						this.categoryLIst = res.data
						this.rightList = res.data[0].childrenCategory
						this.rightTopImage = res.data[0].icon
					}
				})
			},
			topToggle(index) {
				uni.showLoading({
					title:"拼命加载中"
				})
				this.rightList =[]
				this.rightTopImage =""
				setTimeout(()=>{
					this.toggle = index
					this.rightList = this.categoryLIst[index].childrenCategory
					this.rightTopImage = this.categoryLIst[index].icon
					uni.hideLoading();
				},300)
			},
			gotoCategoryList(id,name){
				uni.navigateTo({
					url:`/pages/view/categoryList?cid=${id}&cName=${name}`
				})
			}
		},
		// 获取可视化高度
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.clentHeiht = res.windowHeight - 10
				}
			})
		}
	}
</script>

<style lang="scss">
	.categoryList {
		display: flex;
		height: 100%;
		background-color: white;

		.scroll-left {
			width: 200rpx;
			text-align: center;
			line-height: 80rpx;
			background-color: #f8f8f8;

			#category-item {
				height: 80rpx;
			}
		}

		.scroll-rigth {
			flex: 1;
			.topImage {
				width: 510rpx;
				margin: 0rpx auto;
				padding-top: 10rpx;
				height: 200rpx;
				text-align: center;
				border-radius: 10rpx;
				overflow: hidden;
				image {
					width: 510rpx;
					height: 200rpx;
					opacity: 0.9;
				}
			}
			.bottomItime {
				text-align: center;
				padding-top: 10rpx;
				image {
					width: 120rpx;
					height: 120rpx;
				}
			}
		}

		.activeStyle {
			color: #cb0d0d;
			border-left: 2px solid #cb0d0d;
			font-weight: 700;
			font-size: 30rpx;
		}
	}
</style>
